<template>
  <div class="sidebar p-10" :style="{ width:'202px' }">
    <el-menu class="sidebar-el-menu" :default-active="route.path" :collapse="collapse" text-color="#333333"
       unique-opened router>
      <template v-for="item in menuArr">
        <template v-if="item.subs">
          <template v-if="(item.subs && item.subs.length > 1) ||
            (item.subs && item.subs.length == 1 && item.subs[0].title != item.title)
            ">
            <el-sub-menu :index="item.path || item.subs[0].path" :key="item.id">
              <template #title>
                <img :src="item.icon" style="width: 24px; margin-right: 5px" v-if="item.icon" alt="" />
                <i :class="item.icon" v-else></i>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-sub-menu v-if="subItem.subs && subItem.subs.length > 0" :index="subItem.path" :key="subItem.id">
                  <template #title>
                    <div style="padding-left: 20px">{{ subItem.title }}</div>
                  </template>
                  <el-menu-item v-for="threeItem in subItem.subs" :key="threeItem.id" :index="threeItem.path"><span>{{
                    threeItem.title }}</span>
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="subItem.path" :key="subItem.id" style="padding-left: 45px">
                  <span>{{ subItem.title }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item :index="item.subs[0].path" :key="item.id">
              <template #title>
                <img :src="item.subs[0].icon" style="width: 24px; margin-right: 6px" v-if="item.subs[0].icon" alt="" />
                <span>{{ item.subs[0].title }}</span>
              </template>
            </el-menu-item>
          </template>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import {ref,computed} from "vue";
import {useRoute} from 'vue-router';
import {routes} from '@/router/index';
import {useMapGetter} from "@/store/store-hooks/useMapGetter.js"
const route = useRoute();
const collapse = ref(false);
const menuGetters = useMapGetter('menus',['getMenusIndex']);

const menuArr = computed(()=>{
  let menus =[];
  const menusIndex=menuGetters.getMenusIndex.value();
  routes.forEach((item,index) => {
    if (item.isMenu&&item.meta&&item.meta.sideTitle&&menusIndex===item.meta.sort) {
      let temp={
        title:item.meta.sideTitle,
        id:index+'',
        subs:[]
      }
      if(item.children){
        item.children.forEach((sub,subIndex) => {
          if(sub.meta&&sub.meta.title){
            temp.subs.push({
              title:sub.meta.title,
              index:index+'-'+subIndex,
              path:sub.path?item.path+'/'+sub.path:item.path
            })
          }
        });
      }
      menus.push(temp);
    }
  });
  return menus
});
</script>

<style lang="scss" scoped>
.sidebar {
  position:fixed;
  top: 70px;
  left: 0;
  overflow-y: scroll;
  height:calc(100vh - 70px);
  background: #f0f0f0;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu {
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar>ul {
  height: 100%;
}

.el-menu-item.is-active {
  background: var(--el-color-primary-light-9);
  border-left: 6px solid var(--el-color-primary);
}

.el-menu-item {
  border-left: 6px solid #ffffff;

  span {
    white-space: normal;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical !important;
    box-sizing: border-box;
    line-height: 18px;
  }
}

:deep(.el-sub-menu) {
  .el-menu-item {
    span {
      white-space: normal;
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical !important;
      box-sizing: border-box;
      line-height: 18px;
    }
  }

  .el-sub-menu__title {
    span {
      width: calc(100% - 45px);
      white-space: normal;
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical !important;
      line-height: 18px;
    }
  }
}

.el-menu-item:hover {
  background: #fff;
}
</style>